<template>
  <div class="home_box">
    <div class="left_content">
      <template v-if="!simulation_data">
        <Loading></Loading>
      </template>
      <template v-else>
        <template v-for="item in simulation_data" :key="item.id">
          <template v-if="item.type === '2,1'">
            <Article :obj="item"></Article
          ></template>
          <template v-else><Project :obj="item"></Project></template>
        </template>
        <PageNumber
          @pageChange="fn"
          :current="current"
          :total="total"
          :limit="limit"
          :visibleNumber="visibleNumber"
        ></PageNumber
      ></template>
    </div>
    <div class="right_content">
      <AboutMe></AboutMe>
      <HotA></HotA>
       <HotP></HotP>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import Article from "../../components/article";
import AboutMe from "../../components/AboutMe";
import PageNumber from "../../components/PageNumber";
import Loading from "../../components/loading";
import Project from "../../components/Project";
import HotA from "../../components/HotArticle";
import HotP from "../../components/HotProject";
import { Axios } from "../../axios";
import "../../util/load_dom";
import "../../util/load_dom_project_bx";
import { wash } from "../../util/wash_data";
export default {
  name: "Home",
  components: {
    Article,
    AboutMe,
    PageNumber,
    Loading,
    Project,
    HotA,
    HotP
  },
  setup() {
    let simulation_data = ref(null);
    let current = ref(1); //当前页数
    let total = ref(110); //数据总量
    let limit = ref(7); // 每次请求个数
    let visibleNumber = ref(5); //尺度
    let fn = async (lim) => {
      current.value = lim;
      simulation_data.value = null;
      let data = (
        await Axios({
          url: "/data/getDemo",
          method: "post",
          data: {
            page: current.value,
            number: limit.value,
          },
        })
      ).data.data.data;
      total.value = data.count - 1;
      let render_arr = wash(data.rows);
      simulation_data.value = render_arr;
    };

    onMounted(() => {
      async function fn() {
        let data = (
          await Axios({
            url: "/data/getDemo",
            method: "post",
            data: {
              page: current.value,
              number: limit.value,
            },
          })
        ).data.data.data;
        total.value = data.count - 1;
        let render_arr = wash(data.rows);
        simulation_data.value = render_arr;
      }
      fn();
    });

    return {
      simulation_data,
      fn,
      current,
      total,
      limit,
      visibleNumber,
    };
  },
};
</script>
<style lang="less">
.pageNumber {
  width: 500px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.home_box {
  padding-top: 60px;
  .project_bx {
    width: 740px;
  }
  .ImageLoader_con {
    min-height: 140px;
  }
  .left_content {
    min-width: 740px;
    min-height: 100vh;
    float: left;
    position: relative;
  }
  .right_content {
    float: right;
  }
}
</style>
